<template>
  <div id="app">
    <!-- 如何使用 vuex 中的状态呢？ -->
    <div>
      <div>child1 module</div>
      <div>state - a - {{ $store.state.child1.a }}</div>
      <div><button @click="$store.commit('changeA', 10)">changeA</button></div>
      <div><button @click="$store.dispatch('changeAAsync', 20)">changeAAsync</button></div>
      <div>getters - doubleA - {{ $store.getters.doubleA }}</div>
      <hr>
      <div>child2 module</div>
      <div>state - a - {{ $store.state.child2.a }}</div>
      <div><button @click="$store.commit('child2/changeA', 10)">changeA</button></div>
      <div><button @click="$store.dispatch('child2/changeAAsync', 20)">changeAAsync</button></div>
      <!-- 下面这个点语法的访问方式会报错，因为该属性名中有特殊字符，不是一个标准的属性名，不能用点语法访问该属性值 -->
      <!-- <div>getters - doubleA - {{ $store.getters.child2/doubleA }}</div> -->
      <div>getters - doubleA - {{ $store.getters['child2/doubleA'] }}</div>
      <hr>
      <div>state - {{ $store.state.list }}</div>
      <div>getters - {{ $store.getters.filterList }}</div>
      <div>sumOfFilterList - {{ $store.getters.sumOfFilterList }}</div>
      <div>sumOfFilterList - {{ $store.getters.sumOfFilterList }}</div>
      <div>sumOfFilterList - {{ $store.getters.sumOfFilterList }}</div>
      <div>sumOfFilterList - {{ $store.getters.sumOfFilterList }}</div>
      count: {{ $store.state.count }},
      <div>doubleCount: {{ $store.getters.doubleCount }},</div>
      <div>doubleCount: {{ $store.getters.doubleCount }},</div>
      <div>doubleCount: {{ $store.getters.doubleCount }},</div>
      <div>doubleCount: {{ $store.getters.doubleCount }},</div>
      mapState - count: {{ count }},
      <!-- <button @click="onClick">addCount</button>
      <button @click="$store.commit('addCountN', 2)">addCount2</button>
      <button @click="$store.commit('addCountNN', [3, 4, 5, 6])">addCountNN</button> -->
      <button @click="addCount">addCount</button>
      <button @click="addCountN(2)">addCount2</button>
      <button @click="addCountNN([3, 4, 5, 6])">addCountNN</button>
      <!-- 不规范，隐患：Vuex 中的状态毕竟是公共的，如果直接修改，那么变化就不受控制了，谁都能直接改，导致状态的管理混乱，通过 mutations 这个统一的修改入口，就可以集中控制 -->
      <!-- <button @click="$store.state.count = 100">addCountHeHe</button> -->
    </div>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  computed: {
    // 相当于：添加了一个 count 计算属性
    // mapState 这个函数的返回值，长这样：{ count: function () { return $store.state.count }, b: () => $store.state.b, c() { return $store.state.c } }
    ...mapState(['count']),
    // 此处省略一万个计算属性
    // 在写第一万零一个的时候，写了一个和 mapState 映射过来的 state 重名的计算属性
    // count() {}
    // count: function () { return $store.state.count }
  },
  methods: {
    // 映射了三个 mutation 进来，挂到 methods 上
    ...mapMutations(['addCount', 'addCountN', 'addCountNN']),
    onClick () {
      // 阶段确认：初学者，写代码，最忌讳，一下写完
      // 调用 addCount 这个 mutation
      this.$store.commit('addCount')
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
